<template>
  <div id="app">
  
    <transition name="out-left">
      <SideMenu v-show="showMenu" @close="showMenu=false"></SideMenu>
  
    </transition>
  
    <button @click="showMenu=true">弹出菜单</button>
  
    <router-view></router-view>
  </div>
</template>

<script>

// 先导入
import SideMenu from './components/SideMenu.vue'

export default {
  name: 'app',
  components: {
    SideMenu
  },
  data: function () {
    return {
      showMenu: false
    }
  }
}
</script>

<style scoped>
.out-left-enter {
  transform: translate(-100%, 0)
}

.out-left-enter-active {
  transition: all 0.7s;
}

.out-left-leave-active {
  transform: translate(-100%, 0);
  transition: all 0.7s;
}
</style>
